<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @input="searchs" v-model="mess" type="text" placeholder="搜索" confirm-type="search"></input>
			</view>
			<view class="quxiao" @click="back">取消</view>
		</view>
		<view class="xianshi" v-if="mess && stus == 1" @click="seachMess">搜索 : {{mess}}</view>
		<view class="content" v-if="stus == 2">
			<view class="list" v-for="(item, index) in arrList" :key='index'>
				<view class="head_imgs">
					<view class="head_img"><image :src="item.avatar != ''?urls+item.avatar:'' || '../../static/image/bg_img.png'"></image></view>
				</view>
				<view class="con">
					<view class="name">{{item.nickname}}</view>
					<view class="gray">{{item.mesg}}</view>
				</view>
				<view class="times">{{item.createtime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mess:'',
				stus:1,//结果显示标识
				group_id : '',
				arrList:[],
				urls: this.$common.baseUrl
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad(option){
			this.group_id = option.group_id
		},
		methods: {
			searchs(e){
				this.mess = e.detail.value;
				if(this.mess == ''){
					this.stus = 1;
				}
			},
			//返回上一级
			back() {
				this.stus = 1;
				uni.navigateBack();
			},
			seachMess(){
				this.stus = 2;
				console.log(this.group_id);
				var obj = {
					group_id : this.group_id,
					search : this.mess
				}
				this.$common.requests('/api/chat/groupchatmsg', obj).then(res => {
					if (res.data.code == 1) {
						this.arrList = res.data.data;
					}else{
						this.$api.msg('没有此记录')
					}
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100vw;
		height: 100vh;
		/* background: #F5F4F9; */
	}

	.bg-white {
		padding: 50upx 0 20upx 0;
		background: #F5F4F9;
	}

	.round {
		border-radius: 10upx !important;
		background: #FFF;
		height: 80upx;
	}

	.quxiao {
		margin-right: 30upx;
	}

	.xianshi {
		padding: 30upx;
		color: #4C68FF;
	}
	.list{
		margin: 0 30upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #E8E8E8;
	}
	.head_imgs{
		width: 20%;
	}
	.head_img{
		width: 80%;
		padding-top: 80%;
		position: relative;
	}
	.head_img image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 50%;
	}
	.con{
		width: 40%;
	}
	.name{
		font-size: 35upx;
	}
	.gray{
		font-size: 28upx;
		color: #989898;
		padding-top: 20upx;
	}
	.times{
		font-size: 28upx;
		color: #989898;
		margin-bottom: 8%;
	}
</style>
